/**
 * @name TopBar
 * @desc 顶部工具条
 */
import React from 'react'
import { Avatar, Popover, Button, Divider } from 'antd'
import { Link } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import styles from './styles.module.less'
import logo from '@/assets/images/afaire-logo-color-128.png'

const serverUrl = process.env.REACT_APP_SERVER_URL

function TopBar(props) {
  const { user } = props
  return (
    <header className={styles.container}>
      <img src={logo} alt='afaire' className={styles.logo} />
      <h1 className={styles.logo_title}>afaire</h1>

      <Popover
        placement='bottomRight'
        content={
          <div className={styles.content}>
            <h2>{user.info.nickname}</h2>

            <Divider />
            <Link to='/account'>Account Center</Link>
            <Divider />
            <Button onClick={user.logout}>Logout</Button>
          </div>
        }
      >
        <Avatar src={serverUrl + user.info.avatar} size='large' />
      </Popover>
    </header>
  )
}

export default inject('user')(observer(TopBar))
